<template>
  <div class="one">
    <span class="text">count:{{ count }}</span>
    <button @click="add">递增</button>
    <a-space>
      <a-button type="primary">Primary</a-button>
      <a-button>Secondary</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="outline">Outline</a-button>
      <a-button type="text">Text</a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
  import { useStore } from 'vuex'
  import { key } from '@/store/index'
  import { computed } from 'vue'
  const store = useStore(key)
  const count = computed(() => store.state.count)
  const add = () => {
    store.commit('increment')
  }
</script>
<style lang="less" scoped>
  @red: red;
  .one :extend(.two all) {
    width: 200px;
    height: 200px;
    .text {
      color: @red;
      &:hover {
        color: darken(@red, 20%);
        cursor: pointer;
      }
    }
  }
  .two {
    border: 1px solid red;
    // width: calc(100% - 30px);
    // height: 100%;
    // .one > .text;
  }
</style>
